<template>
  <div class="ipo-content">
    <div v-for="(item, idx) in contentInfo" :key="idx">
      <div class="con" v-if="item.subResult.result.length">
        <div class="con-left">
          <p class="date">{{ item.key }}</p>
        </div>
        <div class="con-center"></div>
        <ul class="con-right">
          <li
            class="right-li"
            v-for="(itemLi, index) in item.subResult.result"
            :key="index"
            @click="clickDetail(itemLi.news_id)"
          >
            <span class="li-disc"></span><span v-html="itemLi.opinion"></span>
          </li>
          <li v-if="item.subResult.total > 5">......</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    contentInfo: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    clickDetail(id) {
      this.$emit("clickDetail", id);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.ipo-content {
  flex: 1;
  .con {
    display: flex;
  }
  .con-left {
    width: 1.15rem;

    .date {
      display: inline-block;
      line-height: 0.3rem;
      width: 1.04rem;
      white-space: nowrap;
      font-size: 0.1rem;
      margin: 0 auto;
      padding: 0.04rem 0.08rem;
      border-radius: 2px;
      background-color: #c7e3f6;
    }
  }
  .con-center {
    width: 1px;
    background-color: rgba(199, 227, 246, 0.7);
  }
  .con-right {
    padding-left: 0.24rem;
    padding-bottom: 0.1rem;
    flex: 1;
    border-bottom: 1px dashed rgba(187, 187, 187, 1);
    margin-bottom: 0.2rem;
    .right-li {
      //   list-style-type: disc;
      margin-bottom: 0.2rem;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      &:last-of-type {
        margin-bottom: 0.1rem;
      }
    }

     em {
      color: #ff8c00 !important;
    }

    .li-disc {
      position: relative;
      top: -2px;
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 5px;
      border-radius: 50%;
      background-color: #333;
    }
  }
}
</style>